<m-card [autoHeight]="true">
  <div card-head>
    <div class="g-card-title">任务总览</div>
    <div class="">
      <m-nav-tabs
        [data]="tabs"
        [appearance]="'pill'"
        [value]="value"
        (valueChange)="timeChange($event)"
      ></m-nav-tabs>
    </div>
  </div>
  <div *ngIf="tasks$ | async as result" class="full">
    <div class="m-widget2">
      <ng-container *ngFor="let task of result.list">
        <div
          class="m-widget2__item m-widget2__item--metal"
          [mDetailRouterLink]="{ id: task.id, type: 'task' }"
          *ngIf="task.jobs[0].status as task_status"
          [ngClass]="{
            'm-widget2__item--success': task_status === TaskStatus.Finish,
            'm-widget2__item--danger': task_status === TaskStatus.Failed,
            'm-widget2__item--info': task_status === TaskStatus.Running,
            'm-widget2__item--warning': task_status === TaskStatus.Waiting
          }"
        >
          <div class="m-widget2__checkbox"></div>
          <div class="m-widget2__desc">
            <span class="m-widget2__text"> {{ task.id }}.{{ task.type | taskType }} </span>
            <br />
            <span class="m-widget2__user-name">
              创建人：
              <a class="m-widget2__link">{{ task.admin?.full_name }}</a>
            </span>
            <br />
            <span class="m-widget2__user-name list">
              <ng-container *ngIf="task.zones.length">
                区域：
                <span class="m-widget2__link" *ngFor="let zone of task.zones">{{ zone }}</span>
              </ng-container>
              &nbsp;
            </span>
          </div>
          <div class="m-widget2__actions">
            <ng-container [ngSwitch]="task_status">
              <span class="g-nowrap text-success" *ngSwitchCase="TaskStatus.Finish">已完成</span>
              <span class="g-nowrap text-danger" *ngSwitchCase="TaskStatus.Failed">失败</span>
              <span class="g-nowrap text-warning" *ngSwitchCase="TaskStatus.Waiting">已挂起</span>
              <span class="g-nowrap text-info" *ngSwitchCase="TaskStatus.Running">执行中</span>
              <span class="g-nowrap text-muted" *ngSwitchCase="TaskStatus.Cancel">已取消</span>
            </ng-container>
          </div>
        </div>
      </ng-container>
    </div>
    <m-pagination
      [length]="result.total"
      [page]="result.page"
      [pageSize]="result.pageSize"
      [useRouteQuery]="false"
      (pageChange)="pageChange($event)"
    ></m-pagination>
  </div>
</m-card>
